
<table class="table">
	<tr>
		<th class="span3">Choose Type</th>
		<td>
			<div class="radio span2"><input type="radio" name="time" value="daily" >Daily</div>
			<div class="radio"><input type="radio" name="time" value="monthly" >Monthly</div>
		</td>
	<tr>
	<tr>
		<th>Pick Time</th>
		<td>
			<div class="input-append date" id="datepicker" data-date="" data-date-format="dd-mm-yyyy" style="display:none;">
				<input  type="text" readonly="readonly" name="date" >	  
				<span class="add-on"><i class="icon-calendar"></i></span>	  
			</div>
			<div class="input-append date" id="monthpicker" data-date="" data-date-format="mm-yyyy" style="display:none;">
				<input  type="text" readonly="readonly" name="date" >	  
				<span class="add-on"><i class="icon-calendar"></i></span>	  
			</div>	
			<br>
			<a class="btn btn-primary" href="javascript:void(0)" onclick="generate()">Generate Report</a>
		</td>
	</tr>
</table>

<script src="<?php echo base_url(); ?>public/js/bootstrap-datepicker.js"></script>
<script>
$("#monthpicker").datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});
$("#datepicker").datepicker( {
    format: "dd-mm-yyyy",
    viewMode: "days", 
	weekStart: 1,
    minViewMode: "days"
});

$(document).ready(function() {
	$('[name="time"]').click(function(evt) {
		type(evt);
	});
});

function type(e) {
	if($(e.target).val() == 'daily'){
		$('#datepicker').css('display','table-row');
		$('#monthpicker').css('display','none');		
	} else{
		$('#datepicker').css('display','none');
		$('#monthpicker').css('display','table-row');
	}
}

function generate() {
	if($('input[name="time"]').filter('[value="daily"]').is(':checked')){
		if($('#datepicker > input').val() == '') {
			alert('Please pick date first');
		}
		else {
			daily($('#datepicker > input').val());
		}
	}
	else if($('input[name="time"]').filter('[value="monthly"]').is(':checked')){
		if($('#monthpicker > input').val() == '') {
			alert('Please pick month first');
		}
		else {
			monthly($('#monthpicker > input').val());
		}
	}
	else {
		alert('Please choose type first');
	}
}

function daily(date) {
	var dateArr = date.split('-',3);
	window.open('<?= base_url('report/daily_outlet_sales') ?>'+'/'+dateArr[2]+'-'+dateArr[1]+'-'+dateArr[0], '_blank');
}

function monthly(date) {
	var dateArr = date.split('-',2);
	window.open('<?= base_url('report/monthly_outlet_sales') ?>'+'/'+dateArr[0]+'/'+dateArr[1], '_blank');
}
</script>